<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="${ctx}/statics/css/bootstrap.min.css" />
<link rel="stylesheet" href="${ctx}/statics/css/font-awesome.min.css" />
<link rel="stylesheet"
	href="${ctx}/statics/js/layer/skin/default/layer.css" />
<link rel="stylesheet"
	href="${ctx}/statics/js/bootstrap-table/bootstrap-table.css" />
<link rel="stylesheet" href="${ctx}/statics/js/toastr/toastr.css" />


<%-- <script type="text/javascript" src="${ctx}/statics/js/toastr/toastr.min.js"></script> --%>
<%-- <script type="text/javascript" src="${ctx}/statics/js/jquery-form/jquery.form.js"></script> --%>


</head>
<body>

	<!-- 添加和编辑模态窗口 -->
	<div class="modal fade" id="entityModal" role="dialog"
		aria-labelledby="userModelLabel" aria-hidden="true"
		data-backdrop="false">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">添加员工</h4>
				</div>
				<div class="modal-body">
					<form id="entity_edit_form" class="form-horizontal">
						<input type="hidden" id="id" name="id">
						<div class="form-group">
							<label class="control-label col-sm-3">姓名：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control col-sm-3" name="userName" placeholder="必填">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">账号：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control col-sm-3" name="userNum" placeholder="必填">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">密码：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control col-sm-3" name="userPw" placeholder="必填">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">年龄：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control col-sm-3" name="userAge">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">性别：</label>
							<div class="col-sm-8">
								<select class="form-control" id="userSex" name="userSex">
									<option value="男" selected="selected">男</option>
									<option value="女">女</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">婚姻：</label>
							<div class="col-sm-8">
								<select class="form-control" id="isMarried" name="isMarried">
									<option value="已婚" selected="selected">已婚</option>
									<option value="未婚">未婚</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">民族：</label>
							<div class="col-sm-8">
								<select class="form-control" id="userNation" name="userNation">
									<option value="汉" selected="selected">汉</option>
									<option value="其他">其他</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">学历：</label>
							<div class="col-sm-8">
								<select class="form-control" id="userDiploma" name="userDiploma">
									<option value="本科" selected="selected">本科</option>
									<option value="小学">小学</option>
									<option value="初中">初中</option>
									<option value="高中">高中</option>
									<option value="硕士">硕士</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">部门：</label>
							<div class="col-sm-8">
								<select class="form-control" id="dp" name="departmentId">
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">角色：</label>
							<div class="col-sm-8">
								<select class="form-control" id="re" name="roleId">
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">工资卡号：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control col-sm-3"
									name="userBankcard">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">身份证：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control col-sm-3"
									name="userIdnum">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">邮箱：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control col-sm-3" placeholder="必填"
									name="userEmail">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">地址：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control col-sm-3"
									name="userAddress">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3">手机：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control col-sm-3" placeholder="必填"
									name="userMobile">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-sm btn-primary"
						id="entityModalBtn">确定</button>
					<button type="button" class="btn btn-sm btn-default"
						data-dismiss="modal" id="Close">关闭</button>
				</div>
			</div>
		</div>
	</div>





	<div id="main-content">
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading">员工信息</div>
					<!-- /.panel-heading -->
					<div class="panel-body">

						<!-- 搜索                                                                -->
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<form class="form-horizontal" role="form"
									id="entity_search_form">
									<div class="form-group">

										<div class="col-sm-4">
											<div class="input-group  ">
												<span class="input-group-addon"> <i class="icon-home"></i>
												</span> <input class="form-control input-mask-phone" type="text"
													id="form-field-mask-2" name="userName" placeholder="员工名称">
											</div>
										</div>

										<div class="col-sm-1">
											<button class="btn btn-sm btn-info" type="submit">
												<i class="icon-search nav-search-icon"></i> 查询
											</button>
										</div>
										<div class="col-sm-1">
											<button class="btn btn-sm btn-primary" type="reset">
												<i class="icon-undo bigger-110"></i> 清除
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
						<!-- 搜索                                                                -->

						<!-- 添加                                                                -->
						<div id="entity_table_tools">
							<!-- id="advertisement_table_tools" -->
							<div class="text-right">
								<button type="button" class="btn btn-success btn-sm"
									onclick="addData()">新增员工</button>
							</div>
						</div>
						<!-- 添加                                                                -->
						<!-- 主体表格                                                                -->
						<table id="entity_table" class="table table-bordered table-hover">
							<!-- id="user_table" -->
						</table>
						<!-- 主体表格                                                                -->

					</div>
					<!-- panel body -->
				</div>
			</div>
		</div>
	</div>
	<%@ include file="../common.jsp"%>
	<script type="text/javascript"
		src="${ctx}/statics/js/jquery-form/jquery.form.js"></script>
</body>
<script type="text/javascript">
	$(function() {
		getDepartments();
		getRoles();
		$('#entity_table')
				.bootstrapTable(
						{
							url : '${ctx}/user/getList.do',
							pagination : true,
							paginationLoop : false,
							smartDisplay : false,
							striped : true,
							pageSize : 10,
							pageList : [ 10, 20, 50, 100 ],
							sidePagination : 'server',
							showRefresh : false,
							showColumns : false,
							paginationNextText : '下一页',
							paginationPreText : '上一页',
							cache : false,
							columns : [
									{
										field : 'id',
										title : 'ID',
										width : 50
									},
									{
										field : 'userName',
										title : '员工姓名',
										width : 50
									},
									{
										field : 'userSex',
										title : '性别',
										width : 50
									},
									{
										field : 'userAge',
										title : '年龄',
										width : 50
									},
									{
										field : 'userNation',
										title : '民族',
										width : 50
									},
									{
										field : 'departmentName',
										title : '所属部门',
										width : 50
									},
									{
										field : 'roleName',
										title : '角色',
										width : 50
									},
									{
										field : 'userDiploma',
										title : '学历',
										width : 50
									},
									{
										field : 'isMarried',
										title : '婚姻',
										width : 50
									},
									{
										field : 'userAddress',
										title : '家庭地址',
										width : 50
									},
									{
										field : 'userMobile',
										title : '手机',
										width : 50
									},
									{
										field : 'userEmail',
										title : '邮箱',
										width : 50
									},
									{
										field : '',
										title : '操作',
										align : 'center',
										width : 10,
										formatter : function(value, row, index) {
											return '<div class="visible-md visible-lg hidden-sm hidden-xs btn-group">'
													+ '<button class="btn btn-xs btn-info" id="editData" title="编辑"><i class="icon-edit bigger-130"></i></button>'
													+ '<button class="btn btn-xs btn-danger" id="deleteData" title="删除"><i class="icon-trash bigger-130"></i></button></div>';
										},
										events : {
											'click #editData' : editData,
											'click #deleteData' : deleteData,
										}

									} ],
							queryParams : function(params) {
								//params.usreId
								$.extend(params, $("#entity_search_form")
										.serializeJson())/* serializeJson()); */
								//console.log(params);
								return params;
							}
						});

		$("#entity_search_form").submit(function(e) {
			e.preventDefault();
			$('#entity_table').bootstrapTable('refresh');
		});

	});

	function editData(e, v, row) {
		$("#entityModal .modal-title").empty().html("修改员工信息");
		$("#entity_edit_form")[0].reset();
		$("#entity_edit_form input[name=id]").val(row.id);
		$("#entity_edit_form input[name=userName]").val(row.userName);

		$("#entity_edit_form input[name=userNum]").val(row.userNum);
		$("#entity_edit_form input[name=userNum]").attr("disabled", true);
		$("#entity_edit_form input[name=userPw]").val("***************");
		$("#entity_edit_form input[name=userPw]").attr("disabled", true);

		$("#entity_edit_form input[name=userAge]").val(row.userAge);
		$("#entity_edit_form input[name=userBankcard]").val(row.userBankcard);
		$("#entity_edit_form input[name=userIdnum]").val(row.userIdnum);
		$("#entity_edit_form input[name=userEmail]").val(row.userEmail);
		$("#entity_edit_form input[name=userAddress]").val(row.userAddress);
		$("#entity_edit_form input[name=userMobile]").val(row.userMobile);

		$("#isMarried").val(row.isMarried);
		$("#userSex").val(row.userSex);
		$("#userNation").val(row.userNation);
		$("#userDiploma").val(row.userDiploma);
		$("#dp").val(row.departmentId);
		$("#re").val(row.roleId);
		$('#entityModal').modal('show');
	}
	function deleteData(e, v, row) {
		var r = confirm("你确定删除该员工吗？");
		if (r) {
			$.ajax({
				url : "${ctx}/user/deleteDataById.do",
				type : "POST",
				data : {
					"id" : row.id
				},
				success : function(data) {
					if (data.success) {
						$('#entity_table').bootstrapTable('refreshOptions', {
							pageNumber : 1
						});
					} else {
						alert(data.errorMessage);
					}
				}
			});
		}
	}

	function addData(e, v, row) {
		$("#entity_edit_form")[0].reset();
		$("#entityModal .modal-title").empty().html("添加员工");
		$("#entity_edit_form input[name=userNum]").attr("disabled", false);
		$("#entity_edit_form input[name=userPw]").attr("disabled", false);
		$("#entity_edit_form input[name=id]").val("");
		$('#entityModal').modal('show');
	}
	$("#entityModal").on('click', '#entityModalBtn', function() {
		var result = checkForm();
		if (!result) {
			return false;
		}
		$.ajax({
			url : "${ctx}/user/saveOrUpdate.do",
			type : "POST",
			data : $("#entity_edit_form").serialize(),
			success : function(data) {
				if (data.success == true) {
					$('#entityModal').modal('hide')
					$('#entity_table').bootstrapTable('refresh');
				} else {
					alert(data.errorMessage);
				}
				$("#entityModal").prop("disabled", false);
			}
		});
	});
	function checkForm() {
		var flag=false;
		var kk = $("#entity_edit_form input[name=id]").val();
		if (kk == "") {
			checkUserNumIsExist($("#entity_edit_form input[name=userNum]").val(),function(data) {
						if (data.success) {
						} else {
							flag=true;
							alert(data.errorMessage);
						}

					});
		}
		if(flag){
			return false;
		}
		
		
		var userName=$("#entity_edit_form input[name=userName]").val();
		if (userName == '' || userName == null) {
			alert("用户姓名不能为空");
			return false;
		}
		
		
		
		if ($("#entity_edit_form input[name=id]").val() == null|| $("#entity_edit_form input[name=id]").val() == "") {
			var userNum = $("input[name=userNum]").val();
			if (userNum == '' || userNum == null) {
				alert("用户账号不能为空");
				return false;
			}
			var userPw = $("input[name=userPw]").val();
			if (userPw == '' || userPw == null) {
				alert("用户密码不能为空");
				return false;
			}
		}

		var reg = /^\d{1,3}$/;
		var userAge = $("input[name=userAge]").val();
		var flag = reg.test(userAge);
		if (!flag) {
			//	toastr.warning("请填正确格式的联系号码");
			alert("请填正确的年龄");
			return false;
		}

		
		
		var isMarried = $("#isMarried").val();
		if (isMarried == '' || isMarried == null) {
			alert("请选择婚姻状态");
			return false;
		}
		var departmentId = $("#dp").val();
		if (departmentId == '' || departmentId == null) {
			alert("请选择部门");
			return false;
		}
		var roleId = $("#re").val();
		if (roleId == '' || roleId == null) {
			alert("请选择角色");
			return false;
		}
		var regForEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
		var userEmail = $("input[name=userEmail]").val();
		if (!regForEmail.test(userEmail)) {
			//	toastr.warning("请填写正确的邮箱");
			alert("请填写正确的邮箱");
			return false;
		}
		var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
		var userMobile = $("input[name=userMobile]").val();
		var flag = reg.test(userMobile);
		if (!flag) {
			//	toastr.warning("请填正确格式的联系号码");
			alert("请填正确格式的联系号码");
			return false;
		}

		return true;
	}

	function getDepartments() {
		$.ajax({
			url : "${ctx}/departmentInfo/getAllList.do",
			type : "GET",
			data : {},
			success : function(data) {
				if (data.success) {
					var html = "<option value=''>请选部门</option>";
					for (var i = 0; i < data.result.length; i++) {
						html = html + "<option value='"+data.result[i].id+"'>"
								+ data.result[i].departmentName + "</option>"
					}
					$("#dp").html(html);
				} else {
					alert(data.errorMessage);
				}
			}
		});
	}
	function getRoles() {
		$.ajax({
			url : "${ctx}/userRole/getAllList.do",
			type : "GET",
			data : {},
			success : function(data) {
				if (data.success) {
					var html = "<option value=''>请选角色</option>";
					for (var i = 0; i < data.result.length; i++) {
						html = html + "<option value='"+data.result[i].id+"'>"
								+ data.result[i].roleName + "</option>"
					}
					$("#re").html(html);
				} else {
					alert(data.errorMessage);
				}
			}
		});
	}

	function checkUserNumIsExist(userNum, callback) {
		$.ajax({
			url : "${ctx}/user/checkUserNumIsExist.do",
			type : "GET",
			async :false,
			data : {
				"userNum" : userNum
			},
			success : callback
		});
	}
</script>
</html>